<template>
    <div class="sidebar">
        <Menu :theme="theme" :active-name="sideBarName" class="sidebar" @on-select="routeTo">
            <h1 style="color: white;text-align: center">Max Studio</h1>
            <MenuGroup title="报名">
                <MenuItem name="entry/choose/1">
                    <Icon type="document-text"></Icon>
                    选取入围
                </MenuItem>
                <!--<MenuItem name="2">-->
                    <!--<Icon type="chatbubbles"></Icon>-->
                    <!--评论管理-->
                <!--</MenuItem>-->
            </MenuGroup>
            <MenuGroup title="投票">
                <MenuItem name="activity/manage">
                    <Icon type="playstation"></Icon>
                    活动管理
                </MenuItem>
                <MenuItem name="activity/catalog">
                    <Icon type="playstation"></Icon>
                    分类管理
                </MenuItem>
                <MenuItem name="vote/item/manage">
                    <Icon type="playstation"></Icon>
                    投票项目
                </MenuItem>
            </MenuGroup>
        </Menu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                theme: 'dark',
            }
        },
        props:['sideBarName'],
        methods: {
            routeTo(name) {
                window.location.href = '/' + name;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .sidebar {
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 21;
        float: left;
    }
</style>